<template>
  <div class="indexBox">
    <!-- 标题 -->
    <x-header
      :left-options="{showBack: false,backText:''}"
      class="headerBox"
      :class="topFixed?'active':''"
    >
      <img v-if="!topFixed" src="../assets/images/157798272494903728.gif" alt class="hotHint" />
      <!-- 搜索 -->
      <div v-if="topFixed" class="searchBox">
        <div class="searchInner flex">
          <x-icon type="ios-search-strong" size="22" class="searchIcon"></x-icon>
          <input
            type="text"
            class="searchInput"
            v-model="keyWord"
            placeholder="请输入商品"
            @keyup.enter="searchClick"
          />
        </div>
      </div>
      <div slot="left" class="headLeft">
        <img src="../assets/images/157199320847433454.png" alt />
      </div>
      <div slot="right" class="headRight">
        <img src="../assets/images/157199322108277118.png" alt />
      </div>
    </x-header>
    <!-- 搜索 -->
    <div class="titleSearch">
      <div class="searchBox">
        <div class="searchInner flex">
          <x-icon type="ios-search-strong" size="22" class="searchIcon"></x-icon>
          <input
            type="text"
            class="searchInput"
            v-model="keyWord"
            placeholder="请输入商品"
            @keyup.enter="searchClick"
          />
        </div>
      </div>
    </div>
    <swiper :list="bannerList" dots-position="center" auto class="bannerBox"></swiper>
    <!-- 分类导航 -->
    <ul class="navClassifyBox clearfix">
      <li v-for="(item,index) in navClassify">
        <router-link :to="item.link" class="navItem">
          <img :src="item.img" alt />
          <div>{{item.title}}</div>
        </router-link>
      </li>
    </ul>
    <!-- 大促 -->
    <router-link :to="dacu.link" class="dacuBox">
      <img :src="dacu.img" alt />
    </router-link>
    <!-- 限时抢购 -->
    <div class="timeLimit">
      <router-link
        :to="item.link"
        v-for="(item,index) in limitTimeGoods"
        :key="index"
        class="linkItem"
      >
        <div class="title">
          {{item.title}}
          <span v-if="item.limit" class="downTime">{{downTime}}</span>
        </div>
        <div class="hint">{{item.hint}}</div>
        <div class="goods flex">
          <div v-for="(item2,index2) in item.goods" :key="index2" class="goodsItem">
            <img :src="item2.img" alt />
            <div v-if="item.limit" class="money">￥{{item2.content}}</div>
            <div v-else>{{item2.content}}</div>
          </div>
        </div>
      </router-link>
      <!-- 头条 -->
      <div class="wtoutiao flex">
        <div class="label">头条：</div>
        <marquee>
          <marquee-item
            v-for="i in 5"
            :key="i"
            @click.native="onClick(i)"
            class="align-middle"
          >hello world {{i}}hello world {{i}}hello world {{i}}hello world {{i}}hello world {{i}}hello world {{i}}hello world {{i}}</marquee-item>
        </marquee>
      </div>
    </div>
    <!-- 促销 -->
    <div class="cuxiao">
      <img src="../assets/images/157830054507538464.png" alt class="topImg" />
      <div class="cuxiaoIn clearfix">
        <router-link to class="linkItem">
          <img src="../assets/images/157830403656763530.png" alt />
        </router-link>
        <router-link to class="linkItem">
          <img src="../assets/images/157830405504609407.png" alt />
        </router-link>
      </div>
      <div class="cuxiaoIn clearfix">
        <router-link to class="linkItem">
          <img src="../assets/images/157830406544373154.png" alt />
        </router-link>
        <router-link to class="linkItem">
          <img src="../assets/images/157830407663051033.png" alt />
        </router-link>
      </div>
      <div class="cuxiaoFooter clearfix">
        <router-link to v-for="(item,index) in cuxiao" :key="index" class="footerLink">
          <img v-show="index==0" src="../assets/images/157829351634196779.png" alt class="bgImg" />
          <img v-show="index==1" src="../assets/images/157829361910612184.png" alt class="bgImg" />
          <img v-show="index==2" src="../assets/images/157829367202097306.png" alt class="bgImg" />
          <img v-show="index==3" src="../assets/images/157829373569129313.png" alt class="bgImg" />
          <img :src="item.img" alt class="goodsPic" />
          <div class="bottom">
            <div class="title">{{item.title}}</div>
            <div class="desc">{{item.desc}}</div>
          </div>
        </router-link>
      </div>
      <div class="borderBottom"></div>
    </div>
    <!-- 猜你喜欢 -->
    <div class="like">
      <div class="likeTitle">
        <img src="../assets/images/157793128909842388.png" alt />
      </div>
      <ul class="likeUl clearfix">
        <li v-for="(item,index) in likeList" :key="index">
          <router-link to="goodsInfo" class="linkBox">
            <img :src="item.img" alt />
            <div class="content">
              <div class="title">{{item.title}}</div>
              <div class="tag flex">
                <div
                  class="tagItem"
                  :class="item2=='自营'?'zy':''"
                  v-for="(item2,index2) in item.tags"
                  :key="index2"
                >{{item2}}</div>
              </div>
              <div class="footer flex">
                <div class="money">￥{{item.money}}</div>
                <div class="evaluate">{{item.evaluate}}+评论</div>
              </div>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
    <TabBar></TabBar>
  </div>
</template>

<script>
import { XHeader, Swiper, Marquee, MarqueeItem } from 'vux'
import TabBar from "../components/tabBar";
import { log } from 'util';
export default {
  components: {
    XHeader,
    Swiper,
    TabBar,
    Marquee,
    MarqueeItem
  },
  data() {
    return {
      keyWord: '',
      topFixed: false,
      // 轮播
      bannerList: [
        {
          url: 'javascript:',
          img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vvsr72j20p00gogo2.jpg',
          title: ''
        },
        {
          url: 'javascript:',
          img: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw1k2wj20p00goq7n.jpg',
          title: ''
        },
        {
          url: 'javascript:',
          title: '',
          fallbackImg: 'https://ww1.sinaimg.cn/large/663d3650gy1fq66vw50iwj20ff0aaaci.jpg'
        }
      ],
      // 分类导航
      navClassify: [
        {
          title: '限时抢购',
          img: require('../assets/images/157796934543366156.png'),
          link: ''
        },
        {
          title: '超市',
          img: require('../assets/images/157165889469283916.png'),
          link: ''
        },
        {
          title: '拼购',
          img: require('../assets/images/157165891799364137.png'),
          link: ''
        },
        {
          title: '爆款手机',
          img: require('../assets/images/157165893790085815.png'),
          link: ''
        },
        {
          title: '大家电',
          img: require('../assets/images/157165895671653077.png'),
          link: ''
        },
        {
          title: '免费兑好物',
          img: require('../assets/images/157165897779526702.png'),
          link: ''
        },
        {
          title: '赚钱',
          img: require('../assets/images/154708810364057852.png'),
          link: ''
        },
        {
          title: '签到有礼',
          img: require('../assets/images/157165906281444963.png'),
          link: ''
        },
        {
          title: '领券中心',
          img: require('../assets/images/157165908511134313.png'),
          link: ''
        },
        {
          title: '更多频道',
          img: require('../assets/images/157165912004147386.png'),
          link: ''
        },
      ],
      // 大促
      dacu: {
        link: '',
        img: require('../assets/images/157831324378233750.png'),
      },
      // 限时
      limitTimeGoods: [
        {
          link: '',
          title: '限时抢购',
          limit: '2020-5-22 23:23:23',
          hint: '潮流好物限时抢',
          goods: [
            {
              content: '3478',
              img: require('../assets/images/10041492310692334646picH_1.jpg')
            },
            {
              content: '1099',
              img: require('../assets/images/10041467510971678602picH_1.jpg')
            },
          ]
        },
        {
          link: '',
          title: '大聚惠',
          hint: '好货一元抢',
          goods: [
            {
              content: '华为',
              img: require('../assets/images/ei-VjTaumACXvNGFjgsJTA.jpg')
            },
            {
              content: '三只松鼠',
              img: require('../assets/images/No7x-ZaOr381oHntxQtzCA.png')
            },
          ]
        },
        {
          link: '',
          title: '百亿补贴',
          hint: '抢超值好货',
          goods: [
            {
              content: '华为',
              img: require('../assets/images/ei-VjTaumACXvNGFjgsJTA.jpg')
            },
            {
              content: '三只松鼠',
              img: require('../assets/images/No7x-ZaOr381oHntxQtzCA.png')
            },
          ]
        },
        {
          link: '',
          title: '苏宁拼购',
          hint: '2人拼更实惠 全场包邮',
          goods: [
            {
              content: '华为',
              img: require('../assets/images/ei-VjTaumACXvNGFjgsJTA.jpg')
            },
            {
              content: '三只松鼠',
              img: require('../assets/images/No7x-ZaOr381oHntxQtzCA.png')
            },
          ]
        },
      ],
      downTime: '',
      // 促销
      cuxiao: [
        {
          title: '影音会场',
          desc: '爆款直降',
          link: '',
          img: require('../assets/images/10041467510971678602picH_1.jpg'),
        },
        {
          title: '影音会场',
          desc: '爆款直降',
          link: '',
          img: require('../assets/images/10041492310692334646picH_1.jpg'),
        },
        {
          title: '影音会场',
          desc: '爆款直降',
          link: '',
          img: require('../assets/images/ei-VjTaumACXvNGFjgsJTA.jpg'),
        },
        {
          title: '影音会场',
          desc: '爆款直降',
          link: '',
          img: require('../assets/images/1572917425316_imgApp_tmndir.jpg'),
        },
      ],
      // 猜你喜欢
      likeList: [
        {
          img: require('../assets/images/K-YqKgBJgNkeGJlPzKtwTw.png'),
          title: '【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银',
          tags: ['自营', '大聚惠'],
          money: '1548',
          evaluate: '100'
        },
        {
          img: require('../assets/images/fKIm1WnLPEXGcYtc9COhyQ.png'),
          title: '飞天53%vol 500ml贵州茅台酒（带杯） 酱香型白酒',
          tags: ['领券39-10',],
          money: '1499',
          evaluate: '100'
        },
        {
          img: require('../assets/images/fKIm1WnLPEXGcYtc9COhyQ.png'),
          title: '飞天53%vol 500ml贵州茅台酒（带杯） 酱香型白酒',
          tags: ['领券39-10',],
          money: '1499',
          evaluate: '100'
        },
        {
          img: require('../assets/images/K-YqKgBJgNkeGJlPzKtwTw.png'),
          title: '【假一赔十】索尼（SONY）WF-1000XM3 真无线蓝牙降噪耳机 入耳式运动耳麦降噪豆 1000X第三代 铂金银',
          tags: ['自营', '大聚惠'],
          money: '1548',
          evaluate: '100'
        },
      ]
    }
  },

  mounted() {
    document.querySelector('body').setAttribute('style', 'background-color:#f8f9fa')
    document.addEventListener('scroll', (e) => {
      let Wheight = window.screen.height
      let top = e.srcElement.scrollingElement.scrollTop;    // 获取页面滚动高度
      if (Wheight - top <= 50) {
        this.topFixed = true
      } else {
        this.topFixed = false
      }
    })
    this.countTime()
  },
  beforeDestroy() {
    document.querySelector('body').removeAttribute('style')
  },
  methods: {
    searchClick() {
      if (this.keyWord !== '' && this.keyWord !== undefined && this.keyWord !== null) {
        if (this.logList.length <= 20) {
          this.logList.push(this.keyWord)
        }
        this.$http.get('url', {
          params: {
            seach: this.keyWord
          }
        }).then(res => {
          // 成功相应
        }).catch(
          // 失败相应
        )
      }
    },
    // 倒计时
    countTime() {
      //获取当前时间
      var date = new Date();
      var now = date.getTime();
      //设置截止时间
      var endDate = new Date(this.limitTimeGoods[0].limit);
      var end = endDate.getTime();
      //时间差
      var leftTime = end - now;
      //定义变量 d,h,m,s保存倒计时的时间
      if (leftTime >= 0) {
        this.d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        this.h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
        this.m = Math.floor(leftTime / 1000 / 60 % 60);
        this.s = Math.floor(leftTime / 1000 % 60);
      }
      var nowTime = `${this.d}天${this.h}:${this.m}:${this.s}`
      this.downTime = nowTime
       
      //递归每秒调用countTime方法，显示动态时间效果
      setTimeout(this.countTime, 1000);
    }
  }
}
</script>

<style lang="less" scoped>
.indexBox {
  font-size: 24px;
  padding-bottom: 100px;
  // 头部导航
  /deep/.headerBox {
    z-index: 9;
    background-color: #f01a0e;
    .vux-header-left {
      left: 24px;
      .vux-header-back {
        color: #000;
      }
      .left-arrow:before {
        border-color: #000;
      }
    }
    .vux-header-title {
      color: #000;
      margin: 0 100px;
    }
    .headLeft {
      img {
        width: 40px;
        margin-top: -16px;
      }
    }
    .headRight {
      img {
        width: 40px;
        margin-top: -16px;
      }
    }
    .hotHint {
      width: 450px;
      margin-top: 15px;
    }
  }
  .active.headerBox {
    position: sticky;
    top: 0;
  }

  // 搜索
  .searchBox {
    width: 90%;
    border-radius: 40px;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 10px;
    height: 60px;
    .searchInner {
      background-color: #f5f5f5;
      // padding: 10px 20px;
      font-size: 30px;
      height: 60px;
      line-height: 60px;
      .searchIcon {
        fill: #6c6c6c;
        margin: 0 20px;
      }
      .searchInput {
        outline: none;
        border: none;
        background-color: #f5f5f5;
        flex-grow: 1;
        font-size: 30px;
      }
      .queryBtn {
        width: 150px;
        height: 100px;
        line-height: 100px;
        text-align: center;
        color: #fff;
        background-color: #2585eb;
      }
    }
  }
  .titleSearch {
    background-color: #f01a0e;
    padding: 10px 0;
    .searchBox {
    }
  }
  // 轮播
  .bannerBox {
    width: 90%;
    height: 300px;
    margin: 10px auto;
    border-radius: 40px;
  }
  // 分类导航
  .navClassifyBox {
    list-style: none;
    padding: 20px;
    li {
      width: 20%;
      float: left;
      text-align: center;
      margin-bottom: 10px;
      .navItem {
        color: currentColor;
        img {
          margin: 0 auto;
          width: 70%;
        }
        div {
          font-size: 24px;
          margin-top: -8px;
          color: #666;
        }
      }
    }
  }
  // 大促
  .dacuBox {
    color: currentColor;
    padding: 20px;
    display: block;
    img {
      width: 100%;
    }
  }
  // 限时抢购
  .timeLimit {
    margin: 20px;
    padding: 20px;
    background-color: #fff;
    border-radius: 20px;
    .linkItem {
      width: 50%;
      display: inline-block;
      padding-bottom: 10px;
      .title {
        font-size: 30px;
        font-weight: bold;
        .downTime {
          font-size: 26px;
          color: #e63f36;
        }
      }
      .hint {
        color: #999;
        overflow: hidden;
        margin: 5px 0;
        width: 100%;
        height: 0.6rem;
        line-height: 0.6rem;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .goods {
        .goodsItem {
          text-align: center;
          width: 50%;
          img {
            width: 100%;
          }
          .money {
          }
          div {
            color: #333;
          }
          .money {
            color: #f50;
          }
        }
      }
    }
  }
  // 头条
  .wtoutiao {
    padding: 0 20px;
    .label {
      font-size: 30px;
      font-weight: bold;
      flex-shrink: 0;
      margin-right: 10px;
    }
    .align-middle {
      white-space: nowrap;
      text-overflow: ellipsis;
      font-size: 28px;
      overflow: hidden;
    }
  }
  // 促销
  .cuxiao {
    .topImg {
      width: 100%;
      margin-bottom: -12px;
    }
    .cuxiaoIn {
      .linkItem {
        float: left;
        width: 50%;
        margin-bottom: -12px;
        img {
          width: 100%;
        }
      }
    }
    .cuxiaoFooter {
      .bgImg {
        width: 100%;
        height: 260px;
      }
      .footerLink {
        overflow: hidden;
        float: left;
        width: 25%;
        position: relative;

        .goodsPic {
          position: absolute;
          z-index: 2;
          top: 20px;
          left: 20px;
          right: 20px;
          width: 70%;
          margin: 0 auto;
        }
        .bottom {
          color: #fff;
          z-index: 2;
          position: absolute;
          left: 20px;
          right: 20px;
          bottom: 40px;
          width: 70%;
          margin: 0 auto;
          text-align: center;
          .desc {
            margin-top: -10px;
          }
        }
      }
    }
    .borderBottom {
      height: 20px;
      background-color: #d11800;
      margin-top: -12px;
      width: 100%;
    }
  }
  // 猜你喜欢
  .like {
    .likeTitle {
      img {
        width: 100%;
        margin-top: 20px;
      }
    }
    .likeUl {
      list-style: none;
      padding: 20px;
      li {
        float: left;
        width: 48%;
        border-radius: 20px;
        margin-right: 4%;
        margin-bottom: 20px;
        box-sizing: border-box;
        padding: 20px;
        background-color: #fff;
        .linkBox{color: currentColor;}
        img {
          width: 100%;
        }
        .content {
          .title {
            margin: 10px auto 0;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            white-space: normal;
          }
          .tag {
            margin: 10px 0;
            .tagItem {
              border: 2px solid #fb0;
              padding: 0 5px;
              border-radius: 10px;
              margin: 0 10px;
            }
            .zy {
              background-color: #fb0;
            }
          }
          .footer {
            .money {
              color: #f42;
              font-weight: bold;
              font-size: 30px;
            }
            .evaluate {
              color: #999;
              margin-left: 20px;
              font-size: 28px;
            }
          }
        }
      }
      li:nth-child(2n) {
        margin-right: 0;
      }
    }
  }
}
</style>